​
<template>
  <div class="i-form">
    <el-form
      ref="formRef"
      :model="model"
      :rules="rules"
      :inline="inline"
      :label-width="labelWidth"
      :label-position="labelPosition"
    >
      <slot name="head" />
      <el-form-item
        v-for="(item, index) in fields"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :label-width="item.labelWidth"
        :style="item.width"
      >
       <!-- 插槽 -->
      <slot v-if="$slots[item.prop]" :name="item.prop"></slot>
        <span v-else>
          <!-- 输入框 -->
        <el-input
          v-if="!item.type"
          clearable
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :icon="item.icon"
          :prefix-icon="item.prefix?item.prefix:null"
          :suffix-icon="item.suffix?item.suffix:null"
          :number="item.number"
          :rows="item.rows"
          :autosize="item.autosize"
          :style="item.elemWidth"
        />
        <!-- 数字输入框 -->
        <el-input-number
          v-if="item.type === 'number'"
          :max="item.max"
          :min="item.min"
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
         <!-- 数字输入框 -->
        <el-input
          v-if="item.type === 'password'"
          :max="item.max"
          :min="item.min"
          show-password
          v-model="model[item.prop]"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
        <!-- 下拉框选择器 -->
        <el-select
          v-if="item.type === 'select'"
          clearable
          v-model="model[item.prop]"
          no-match-text="无匹配数据"
          no-data-text='无匹配数据'
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
          :filterable="item.filterable"
          :multiple="item.multiple"
          :style="item.elemWidth"
          @on-change="(value) => $emit(`on-${item.events}`, value)"
        >
          <el-option
            v-for="opt in options[item.prop]"
            :key="opt[item.bindValue]?opt[item.bindValue]:opt.value"
            :label="opt[item.bindLabel]?opt[item.bindLabel]:opt.label"
            :value="opt[item.bindValue]?opt[item.bindValue]:opt.value"
            :disabled="opt.disabled"
            />
        </el-select>
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="item.type === 'date'"
          clearable
          :type="item.type"
          v-model="model[item.prop]"
          :options="item.options"
          :format="item.format"
          :value-format="item.valueFormat"
          :placeholder="item.placeholder"
          :size="item.size"
          :disabled="item.disabled"
        />
        <!-- 时间选择器 -->
        <el-time-picker
          v-if="item.type === 'time'"
          clearable
          :type="item.type"
          v-model="model[item.prop]"
          :format="item.format"
           :value-format="item.valueFormat"
          :placeholder="item.placeholder"
          :disabled-hours="item.disabledHours?item.disabledHours:null"
          :disabled-minutes="item.disabledMinutes?item.disabledMinutes:null"
         :disabled-seconds="item.disabledSeconds?item.disabledSeconds:null"
          :size="item.size"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
        <!-- 单选框 -->
        <el-radio-group
          v-if="item.type === 'radio'"
          v-model="model[item.prop]"
          :label="item.label"
          :size="item.size"
        >
          <el-radio
            v-for="opt in options[item.prop]"
            :key="opt.value"
            :label="opt.value"
            :size="item.size"
            :fill="item.fill"
            :disabled="opt.disabled"
            >{{ opt.label }}</el-radio
          >
        </el-radio-group>
        </span>
      </el-form-item>
     
    </el-form>
   
  </div>
</template>
              
<script lang="ts">
import {defineComponent, ref, reactive, toRefs,unref} from "vue";
import { ElMessage } from 'element-plus'
export default defineComponent({
  components: {
  },
   props: {
    fields: { type: Array, default: [] },
    options:Object,
    model: Object, // 表单数据对象
    rules: Object, // 表单验证对象
    width: Number, // 表单宽度
    labelWidth: { Number, default: "120px" }, // 表单域标签宽度
    labelPosition: {
      type:String,
      default: "right",
    }, // 表单域标签位置
    inline: {
      type: Boolean,
      default: true,
    }, // 行内表单模式
    loading: {
      type: Boolean,
      default: false,
    }, // 表单加载状态
    btnLabelWidth: Number, // 表单域标签的宽度(按钮区)
    submit: {
      type: Boolean,
      default: false,
    }, // 是否显示提交按钮
    reset: {
      type: Boolean,
      default: false,
    }, // 是否显示重置按钮
    button: {
      type: Boolean,
      default: true,
    }, // 是否显示普通按钮
    submitText: {
      type: String,
      default: "Submit",
    }, // 提交按钮文字
    resetText: {
      type: String,
      default: "Reset",
    }, // 重置按钮文字
    buttonText: {
      type: String,
      default: "Button",
    }, // 普通按钮文字
    okType: {
      type: String,
      default: "primary",
    }, // 提交按钮类型
    btnType: String, // 普通按钮类型
    btnLong: Boolean, // 设置按钮的长度为 100%
    // 设置按钮的图标类型
    okIcon: String,
    btnIcon: String,
    btnLoading: {
      type: Boolean,
      default: false,
    }, // 按钮加载状态
    btnType2: {
      type: String,
      default: "primary",
    }, // 普通按钮类型
    btnLong2: Boolean, // 设置按钮的长度为 100%
    // 设置按钮的图标类型
    btnIcon2: String,
  },
  name: "ikechen-form",
  setup(props:any, { emit}:any) {
    const state = reactive({});
    const formRef= ref()
    const methods = {
      handleSubmit() {
        emit("onSuccess");  
      },
      handleReset() {
        emit("onReset");
      },
      handleClick() {
        emit("onClick");
      },
      verification(){
        const formvalid = unref(formRef)
     return  new Promise((resolve, reject)=>{
           formvalid.validate((valid:boolean)=>{
          if(valid){
               resolve(valid)
          }else{
            ElMessage.error('未填写完整')
            reject(valid)
          }
        })
        })
       
      }
    };
    return {
      ...toRefs(state),
      ...methods,formRef,
    };
  },
});
</script>
 
<style>
</style>
 
​